<template>
  <div class="gzl">
    <div class="search">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input
            v-model="search.key"
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="search.time"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
        >
          <el-button type="primary"
          >查询
          </el-button
          >
        </el-form-item
        >
      </el-form>
      <el-button class="ebtn" type="warning" @click="InAdd()">新增开票通知</el-button>
    </div>
    <el-table class="table" stripe :data="tableDataInvoicingNotice" style="width: 100%" height="580">
      <el-table-column type="index" label="序号" align="center" width="180"/>
      <el-table-column prop="createonTime" label="日期" align="center" width="150">
        <template v-slot="scope">
          <div>{{ dateFormat("yyyy-MM-dd", scope.row.createonTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" align="center">
        <template v-slot="scope">
          <div v-if="scope.row.type==1">客户开票</div>
          <div v-if="scope.row.type==2">站点开票</div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" align="center"/>
      <el-table-column prop="kaipiaoMoney" label="开票金额" align="center"/>
      <el-table-column label="状态" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.status==1">待开票</span>
          <span v-if="scope.row.status==2">开票通知中</span>
          <span v-if="scope.row.status==3">待付款</span>
          <span v-if="scope.row.status==4">已完结</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status==3"
            size="small"
            type="primary"
            @click="showDetail(scope.row.type,scope.row,1)"
          >申请付款
          </el-button>
          <el-button size="small" type="text"  @click="showDetail(scope.row.type,scope.row,2)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pgnt">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
    <!--查看票据-->
    <el-dialog
      title="开票"
      :visible.sync="dialogVisible"
      width="76%"
      :modal-append-to-body="false">
      <template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="序号"
          width="140">
          </el-table-column>
          <el-table-column
            prop="name"
            label="票号">
          </el-table-column>
          <el-table-column
            prop="address"
            label="开票时间">
          </el-table-column>
          <el-table-column
            prop="address"
            label="发票金额">
          </el-table-column>
        </el-table>
      </template>
      <p class="huizo">汇总记录</p>
      <template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="index"
            label="序号"
            width="140"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="维修日期"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="零件名称">
          </el-table-column>
          <el-table-column
            prop="address"
            label="零件图号">
          </el-table-column>
          <el-table-column
            prop="address"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="address"
            label="返件数量">
          </el-table-column>
          <el-table-column
            prop="address"
            label="单价（元）">
          </el-table-column>
          <el-table-column
            prop="address"
            label="管理费（元）">
          </el-table-column>
          <el-table-column
            prop="address"
            label="金额（元）">
          </el-table-column>
          <el-table-column
            prop="address"
            label="差旅费（元）">
          </el-table-column>
          <el-table-column
            prop="address"
            label="其他费用">
          </el-table-column>
        </el-table>
      </template>
      <div class="piaomian">
        <span>票面总额</span>
        <el-input style="width: 60%;"></el-input>
        <el-button type="primary">确认</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
    </el-dialog>
    <!--申请付款-->
    <el-dialog
      title="申请付款"
      :visible.sync="dialogVisible1"
      width="80%"
      :modal-append-to-body="false">
      <ul class="el-inputbox">
        <li>
          <span>站点名称</span>
          <el-input style="width: 68%;" disabled v-model="custom_info.siteName"></el-input>
        </li>
        <li>
          <span>联系人</span>
          <el-input style="width: 68%;"disabled v-model="custom_info.contactPerson"></el-input>
        </li>
        <li>
          <span>联系方式</span>
          <el-input style="width: 68%;" disabled v-model="custom_info.phone"></el-input>
        </li>
        <li>
          <span>总金额</span>
          <el-input style="width: 68%;"disabled v-model="custom_info.totalMoney"></el-input>
        </li>
      </ul>
      <ul class="el-inputbox">
        <li>
          <span>已付款金额</span>
          <el-input style="width: 68%;"disabled v-model="custom_info.paymentMoney"></el-input>
        </li>
        <li>
          <span>剩余付款金额</span>
          <el-input style="width: 68%;"disabled v-model="custom_info.lastPaymentMoney"></el-input>
        </li>
        <li>
          <span>申请中金额</span>
          <el-input style="width: 68%;"disabled v-model="custom_info.applyPaymentMoney"></el-input>
        </li>
        <li v-show="isDetail==false, custom_info.lastPaymentMoney > 0">
          <span>本次付款金额</span>
          <el-input style="width: 68%;" v-model="paymentMoneyNow" @input="jinqianshur()"></el-input>
        </li>
      </ul>
      <p class="huizo">维修记录</p>
      <template>
        <el-table
          :data="tableData_repairLog"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号" width="140">
          </el-table-column>
          <el-table-column
            prop="applyTime"
            label="维修日期">
            <template v-slot="scope">
              <span>{{ dateFormat("yyyy-MM-dd", scope.row.applyTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="productName"
            label="零件名称">
          </el-table-column>
          <el-table-column
            prop="productTuhao"
            label="零件图号">
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="returnNumber"
            label="返件总量">
          </el-table-column>
          <el-table-column
            prop="danjia"
            label="单价（元）">
          </el-table-column>
          <el-table-column
            prop="chalvfei"
            label="管理费（元）">
          </el-table-column>
          <el-table-column
            prop="money"
            label="金额（元）">
          </el-table-column>
          <el-table-column
            prop="chalvfei"
            label="差旅费（元）">
          </el-table-column>
          <el-table-column
            prop="qitafeiyong"
            label="其他费用">
          </el-table-column>
        </el-table>
      </template>
      <p class="huizo">发票记录 :</p>
      <template>
        <el-table
          :data="tableData_invoiceLog"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号" width="140">
          </el-table-column>
          <el-table-column
            prop="piaoNumber"
            label="票号">
          </el-table-column>
          <el-table-column
            prop="money"
            label="开票额">
          </el-table-column>
          <el-table-column
            prop="kaipiaoTime"
            label="开票时间">
            <template v-slot="scope">
              {{dateFormat("yyyy-MM-dd",scope.row.kaipiaoTime)}}
            </template>
          </el-table-column>
          <el-table-column
            label="状态">
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: red">待审核</span>
              <span v-if="scope.row.status==2">驳回</span>
              <span v-if="scope.row.status==3">已完成</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="piaomian">
        <span>票面总额</span>
        <el-input disabled style="width: 60%;" v-model="faFaceValue"></el-input>
      </div>
      <p class="huizo">付款记录 :</p>
      <template>
        <el-table
          :data="tableData_paymentLog"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号" width="140">
          </el-table-column>
          <el-table-column
            prop="money"
            label="付款金额">
          </el-table-column>
          <el-table-column
            label="付款时间">
            <template v-slot="scope">{{dateFormat("yyyy-MM-dd",scope.row.createonTime)}}</template>
          </el-table-column>
          <el-table-column
            label="状态">
            <template v-slot="scope">
              <span v-if="scope.row.status==1">待审核</span>
              <span v-if="scope.row.status==2">驳回</span>
              <span v-if="scope.row.status==3">已完成</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="applyPayConfirm">确 定</el-button>
        <el-button @click="dialogVisible1 = false">取 消</el-button>
  </span>
    </el-dialog>
    <!--详情页面-->
    <el-dialog
      title="汇总记录"
      :visible.sync="dialogVisible2"
      width="76%"
      :modal-append-to-body="false">
      <template>
        <el-table
          :data="tableData_detail"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号" width="140">
          </el-table-column>
          <el-table-column
            prop="applyTime"
            label="维修日期">
            <template v-slot="scope">
              <span>{{ dateFormat("yyyy-MM-dd", scope.row.applyTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="productName"
            label="零件名称">
          </el-table-column>
          <el-table-column
            prop="productTuhao"
            label="零件图号">
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="returnNumber"
            label="返件总量">
          </el-table-column>
          <el-table-column
            prop="danjia"
            label="单价（元）">
          </el-table-column>
          <el-table-column
            prop="chalvfei"
            label="管理费（元）">
          </el-table-column>
          <el-table-column
            prop="money"
            label="金额（元）">
          </el-table-column>
          <el-table-column
            prop="chalvfei"
            label="差旅费（元）">
          </el-table-column>
          <el-table-column
            prop="qitafeiyong"
            label="其他费用">
          </el-table-column>
        </el-table>
      </template>
      <template v-show="global_status==2">
        <el-table
          :data="tableData_detail_kaipiaoLog"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            align="center" width="140">
          </el-table-column>
          <el-table-column
            label="开票时间"
            prop="kaipiaoTime"
            align="center">
            <template v-slot="scope">
              <div>{{ dateFormat("yyyy-MM-dd", scope.row.kaipiaoTime) }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="开票号"
            prop="piaoNumber"
            align="center">
          </el-table-column>
          <el-table-column
            prop="money"
            label="开票额"
            align="center">
          </el-table-column>
          <el-table-column
            label="状态"
            align="center">
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: red">待审核</span>
              <span v-if="scope.row.status==2">已驳回</span>
              <span v-if="scope.row.status==3">已完成</span>
            </template>
          </el-table-column>
        </el-table>

      </template>
      <div class="piaomian">
        <span>票面总额</span>
        <el-input disabled style="width: 60%;" v-model="faFaceValue"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
        <el-button @click="dialogVisible2 = false">取 消</el-button>
  </span>
    </el-dialog>
    <!--汇总-->
    <el-dialog
      title="维修记录"
      :visible.sync="dialogVisible3"
      width="60%"
      :modal-append-to-body="false">
      <template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="序号" width="140">
          </el-table-column>
          <el-table-column
            prop="name"
            label="车辆品牌/车型">
          </el-table-column>
          <el-table-column
            prop="address"
            label="车牌号">
          </el-table-column>
          <el-table-column
            prop="address"
            label="维修人员">
          </el-table-column>
          <el-table-column
            prop="address"
            label="维修日期">
          </el-table-column>
          <el-table-column
            prop="address"
            label="状态">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
          >
            <el-button type="text" @click="wxxq()">详情</el-button>
          </el-table-column>
        </el-table>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import TelRepair from "@/views/AfterSaleManagement/TelRepair";

export default {
  inject:['reload'],
  //import引入的组件需要注入到对象中才能使用",
  components: {TelRepair},
  data() {
    //这里存放数据",
    return {
      isDetail:false,
      global_siteId:null,
      tableData_paymentLog:[],
      tableData_invoiceLog:[],
      tableData_repairLog: [],
      paymentMoneyNow: 0,
      custom_info: {},
      tableData_detail_kaipiaoLog: [],
      global_status: null,
      global_id:0,
      faFaceValue: 0,
      tableData_detail: [],
      tableDataInvoicingNotice: [],
      search: {key: "", start: "", end: ""},
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      tableData: [{}],
      total: 1,
      current: 1,
      pagesize: 10,
      //类型选择
      typeList: [
        {value: "0", label: "全部类型"},
        {value: "1", label: "人事审核"},
        {value: "2", label: "财务审核"},
        {value: "3", label: "行政审核"},
        {value: "4", label: "项目审核"},
      ],
      selectType: "",
      selectSit: "",
      sitList: [
        {value: "0", label: "全部站点"},
      ]
    };
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    jinqianshur(){
      if(this.paymentMoneyNow >custom_info.lastPaymentMoney){
        return  this.$message.error("填写金额大于剩余金额,请从新输入")
      }
    },
    applyPayConfirm(){
      let param={
        "createonTime": "",
        "id": 0,
        "money": this.paymentMoneyNow,
        "shenghemessageId": 0,
        "siteId": this.global_siteId,
        "sitekaipiaoId": this.global_id,
        "status": 0
      }
      axios.post("JX_java/afferSale/addSiteFukuan",param).then(res=>{
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data);
          this.reload();
          this.this.dialogVisible1 = false;
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
    showDetail(type, object,d) {
      console.log(object)
      this.global_siteId=object.siteId
      this.global_status=object.status
      this.global_id=object.id
      if (type == 1) {
      } else if (type == 2) {
        console.log(object, JSON.parse(object.siteMaintainIds))
        axios.get("/JX_java/afferSale/getkaipiaoDetailsByStatus?siteKaipiaoId=" + object.id + "&&status=" + object.status).then(res => {
          if (object.status == 1) {
            console.log(res.data.data[object.status.toString()]);
            let {kaipiaoMoney, partAndManpowers} = res.data.data[object.status.toString()]
            this.faFaceValue = kaipiaoMoney
            this.tableData_detail = partAndManpowers
            this.dialogVisible2 = true;
          } else if (object.status == 2) {
            let {invoiceTbs, partAndManpowers, kaipiaoMoney} = res.data.data[object.status.toString()]
            this.faFaceValue = kaipiaoMoney
            this.tableData_detail = partAndManpowers
            this.tableData_detail_kaipiaoLog = invoiceTbs
            this.dialogVisible2 = true;
            console.log(res.data.data)
          } else if (object.status == 3) {
            console.log(res.data.data)
            let {phone,contactPerson,siteName,lastPaymentMoney,applyPaymentMoney,paymentMoney,siteFukuans, siteInvoices, partAndManpowers,totalMoney} = res.data.data[object.status.toString()]
            this.tableData_repairLog = partAndManpowers
            this.tableData_invoiceLog=siteInvoices
            this.faFaceValue=totalMoney
            this.tableData_paymentLog=siteFukuans
            this.tableData_paymentLog=siteFukuans
            this.custom_info.totalMoney=totalMoney
            this.custom_info.paymentMoney=paymentMoney
            this.custom_info.applyPaymentMoney=applyPaymentMoney
            this.custom_info.lastPaymentMoney=lastPaymentMoney
            this.custom_info.siteName=siteName
            this.custom_info.contactPerson=contactPerson
            this.custom_info.phone=phone
            this.dialogVisible1 = true;
            if (d == 1) {
              this.isDetail=false;
            }
            if (d == 2) {
              this.isDetail=true;
            }
          }

        });
      }
    },
    getList() {
      let param = {
        "beginTime": "",
        "endTime": "",
        "key": "",
        "pageNum": 0,
        "pageSize": 0,
        "type": 0
      }
      axios.post("/JX_java/afferSale/getSiteKaiPiaoList", param).then(res => {
        this.tableDataInvoicingNotice = res.data.data.content
        console.log(res.data.data);
      })
    },
    dateFormat(format, time) {
      var t = new Date(time)
      var tf = function (i) {
        return (i < 10 ? '0' : '') + i
      }
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
        switch (a) {
          case 'yyyy':
            return tf(t.getFullYear())
          // break
          case 'MM':
            return tf(t.getMonth() + 1)
          // break
          case 'mm':
            return tf(t.getMinutes())
          // break
          case 'dd':
            return tf(t.getDate())
          // break
          case 'HH':
            return tf(t.getHours())
          // break
          case 'ss':
            return tf(t.getSeconds())
          // break
        }
      })
    },
    InAdd(e, shows) {
      this.$router.push({path: './InvoicingNoticeAdd', query: {e: e, shows: shows}})
    },
    wxxq(e, shows) {
      this.$router.push({path: './SiteMaintenancexq', query: {e: e, shows: shows}})
    },
    // 分页
    handleCurrentChange(e) {
      this.getData(e - 1)
    },
    // 日期改变
    chage(e) {
      console.log(e)
      if (e) {
        this.start =
          e[0].getFullYear() +
          '-' +
          (e[0].getMonth() + 1) +
          '-' +
          e[0].getDate()
        this.end =
          e[1].getFullYear() +
          '-' +
          (e[1].getMonth() + 1) +
          '-' +
          e[1].getDate()
      } else {
        this.start = ''
        this.end = ''
      }
    },
    // 筛选
    onsubmit() {
      this.getData(0)
    },
    //选择申请的类型
    selectTypeChange() {
    },
    //选择站点
    selectSitChange() {
    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.getList();
  },
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {

  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {

  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {

  },
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {

  },
  //生命周期 - 销毁之前",
  beforeDestroy() {

  },
  destroyed() {

  },
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {

  },
}
</script>
<style lang="scss" scoped>
.gzl {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

.table {
  margin-bottom: 20px;
}

.pgnt {
  text-align: center;
}

.demo-form-inline {
  display: inline-block;
}

.search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

.ebtn {
  float: right;
  margin-right: 20px;
}

.el-inputbox {

  width: 100%;
  display: flex;
  flex-wrap: wrap;
  color: #909399;
  margin-top: 20px;
  margin-bottom: 10px;

  li {

    width: 25%;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: center;


    span {
      display: inline-block;
      width: 30%;
    }
  }
}

.huizo {
  margin-top: 20px;
  padding-bottom: 20px;
  color: #000;
  border-bottom: 1px solid RGB(220, 223, 230);
  font-weight: 700;
}

/deep/ .is-leaf {
  text-align: center;
  background: #ffffff;
  //font-size: 16px;
}

/deep/ .cell {
  text-align: center;
}

.piaomian {
  width: 50%;
  margin-top: 20px;

  span {
    display: inline-block;
    margin-right: 10px;
  }

  .el-input {
    margin-right: 10px;
  }
}

.el-button-box {
  padding-bottom: 20px;
  padding-right: 30px;
  display: flex;
  justify-content: flex-end;

  .el-button {

  }
}

.cell {
  text-align: center;
}
</style>
